import BaseContext from '../../context';
import ImageLoad from '../../util/imageload';
/**
 * @class 图片加载
 * @description 图片加载管理
 * @constructor
 */
export default class ImageLoader extends BaseContext {
  constructor(app, options = {}) {
    super(app, options);

    this.maxLen = options.maxLen || 0; // 同一时间加载队列长度
    this.queue = [];
    this.init();
  }

  init() {
    const TAG = `初始化${this.constructor.name}`;
    this.logger.time(TAG);
    this.listener({
      loadImages: this.load.bind(this)
    });
    this.logger.timeEnd(TAG);
    return this;
  }

  // 加载图片
  load(queue = []) {
    this.queue = queue;
    // 没有加载过的图片，需要加载
    const images = this.queue.filter(({ status, isRetry }) => {
      if (isRetry) {
        return ['error', 'timeout'].indexOf(status) > -1;
      }
      return 'init' === status;
    });

    // 做自动加载
    if (this.maxLen === 0) {
      images.forEach(image => this._imageLoad(image));
    } else {
      // 队列加载
      this._queueLoadImage(images, this.maxLen);
    }
  }

  _imageLoad(image, queue = []) {
    if (!image.instance) {
      image.instance = new ImageLoad();
    }
    let { src, instance } = image;
    instance.load(src, {
      // isRetry: image.isRetry,
      callback: imageLoad => {
        const { width, height, status, img, count } = imageLoad;
        this.loadImageFinish(Object.assign(image, { width, height, status, img, count }));
        // 1、这里要保证前一个队列已经完成了一张图片加载；
        // 2、进行剩余队列数据中进行补充一张图片加载操作；
        // 3、至直加载完全部的列队为止；
        // 4、每加载完一张图片后进行callback回调。
        queue.length && this._queueLoadImage(queue, 1);
      }
    })
  }

  /**
   * @function _queueLoadImage 列队加载
   * @param {Array} queue 加入队列中的图片地址数组
   * @param {Number} queueNumber 加入队列中的图片数量默认为1，最大为5
   * @return {Function} callback 队列完成后的回调
   */
  _queueLoadImage(queue, queueNumber = 1) {
    const len = Math.min(queue.length, queueNumber);
    const spliceQueue = queue.splice(0, len);
    for (let i = 0; i < len; i++) {
      const image = spliceQueue[i];
      this._imageLoad(image, queue);
    }
  }

  /**
   * @function loadImageFinish 加载图片完成
   * @param {object} image 图片数据
   * @return 无
   */
  loadImageFinish(image) {
    const index = this.queue.indexOf(image);
    if (index === -1) {
      this.logger.log(`图片资源队列加载异常！${JSON.stringify(image)}`);
    }

    this.emit('loadImageFinish', image);

    // 状态不为init时，剔除队列
    if (['init', 'loading'].indexOf(image.status) === -1) {
      this.logger.log('完成图片加载');
      // 每加载完成一张图片，在队列中剔除
      this.queue.splice(index, 1);
    }
  }
}
